<template>
  <div class="page">
    <div class="login-container">
      <el-form ref="loginForm" :model="loginForm" class="login-form">
        <h2 class="title">橙子超市后台系统</h2>
        <h3 class="title">OrangeSupermarket</h3>
        <el-form-item prop="username">
          <el-input
              prefix-icon="el-icon-user"
              type="text"
              placeholder="<USERNAME>"
              v-model="loginForm.username"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
              prefix-icon="el-icon-lock"
              type="password"
              placeholder="<PASSWORD>"
              v-model="loginForm.password"
              show-password
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
              class="button-login"
              type="primary"
              @click="submitForm('loginForm')"
          >登录</el-button>
          <el-button
              class="button-reset"
              type="info"
              @click="resetForm('loginForm')"
          >重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import axios from "@/api/axios";

export default {
  data() {
    return {
      loginForm: {
        username: "",
        password: "",
      },
    };
  },


  methods: {

    submitForm(loginForm) {
      this.$refs[loginForm].validate(
          // 使用 loginForm 作为表单数据发送
          axios
              .post("/admin/emp/login", this.loginForm)
              .then((response) => {
                console.log(response);
                if (response.data.code===0) {
                  this.$message.error(response.data.msg);
                }else {
                  // 登录成功
                  this.$message.success("登录成功");
                  // 假设JWT令牌在response.data.token中
                  const token = response.data.data.token;
                  // 将令牌保存到localStorage中
                  localStorage.setItem("jwt_token", token);
                  //将其它消息保存
                  localStorage.setItem("username", response.data.data.username);
                  localStorage.setItem("avatarUrl", response.data.data.avatarUrl);
                  localStorage.setItem("id", response.data.data.id);
                  //跳转到主页面
                  this.$router.push("/AdminBroder");
                  //   console.log("Response:", response);
                }
              }).catch((error) => {
                this.$message.error("登录超时");
                console.log(error);
          })
      );
    },

    resetForm(loginForm) {
      this.$refs[loginForm].resetFields();
      this.$message.info("重置成功");
    },
  },
};
</script>

<style scoped>
.page {
  background-color: rgb(234, 234, 234);
  /*
  background-image: url("../assets/background_login.jpg");
  */
  height: 100vh;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

.login-container {
  background-color: #ffffff;
  padding: 40px;
  border-radius: 8px;
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.2);
}

.login-form {
  width: 400px;
}

.button-login {
  width: 180px;
  margin-right: 20px;
}

.button-reset {
  width: 180px;
  margin-left: 20px;
}

.title {
  color: #353535;
}
</style>